<template>
  <div class="item">

    <van-grid :column-num="2">
      <van-grid-item class="text-left" :text="`加盟${franchisee_type == 'car' ? '车' : '商'}ID: `+ item.id" />
      <van-grid-item class="text-left" :text="`状态: ` + item.status_text" />
      <van-grid-item class="text-left" :text="`加盟${franchisee_type == 'car' ? '车' : '商'}名称: `+ item.franchisee_name" />
      <van-grid-item class="text-left" :text="`负责人: ` + item.manager.name" />
    </van-grid>

    <div class="top">
      <div class=" c_flex c_left">
        <div @click="getBalance" class="btn1 fit-content">
          余额:{{item.balance}}
        </div>
      </div>
      <div @click="getDetail" class="btn1 c_flex fit-content m-right">查看详情</div>
      <div @click="getVisit" class="btn1 c_flex fit-content m-right">回访</div>

    </div>

  </div>
</template>

<script>
  export default {
    name: 'item',
    props: {
      item: Object,
      franchisee_type: {
        type: String,
        default: 'franchisee'
      },
    },
    methods: {
      getBalance() {
        this.$router.push({
          path: '/franchisee_balance',
          query: {
            id: this.item.id
          }
        })
      },
      getDetail() {
        this.$router.push({
          path: '/franchisee_detail',
          query: {
            id: this.item.id,
            franchisee_type: this.franchisee_type,
          }
        })
      },
      getVisit() {
        this.$router.push({
          path: '/visit_form',
          query: {
            id: this.item.id,
            
          }
        })
      }
    },
  }
</script>

<style lang="less" scoped>
  .item {
    margin: 0px auto 30px;
    padding-top: 25px;
    width: 640px;
    height: 300px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;
    color: rgba(51, 51, 51, 1);

    .text-left {
      display: flex;
      justify-content: flex-start;
      padding-left: 25px;
    }

    /deep/.van-hairline--top::after {
      border-top-width: 0px;
    }

    /deep/.van-grid-item__content::after {
      border-width: 0;
    }

    .top {
      margin-top: 30px;
      display: flex;

      .c_left {
        display: flex;
        justify-content: flex-start;
        // width: 150px;
        flex: 1;
        margin-left: 25px;
      }

      .fit-content {

        width: fit-content;
      }

      .btn1 {
        height: 60px;

        font-size: 20px;
        border: 1px solid rgba(204, 204, 204, 1);
        border-radius: 8px;
        padding: 15px 11px;
      }
    }
  }
</style>